<template>
  <a-config-provider :locale="locale">
    <div class="Vi18N">
      <div>
        <h1>This is an I18N page</h1>
        <router-view />
        <h5>当前系统语言：{{localeval}}</h5>
        <button
          @click="changeLocale('en-us')"
          v-show="localeval=='zh-cn'"
        >English</button>
        <button
          @click="changeLocale('zh-cn')"
          v-show="localeval=='en-us'"
        >中文</button>
      </div>
      <router-view />
      <h5>其他页面栏位使用方式：</h5>
      <span>{{$t('title.home')}}</span>
      <router-view />
      <h5>内置组件语言切换：</h5>
      <div class="example">
        <a-pagination
          :default-current="1"
          :total="50"
          show-size-changer
        />
      </div>
    </div>
  </a-config-provider>
</template>

<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn')
const EN = 'en-us'
const ZH = 'zh-cn'
export default {
  name: 'Vi18N',
  data () {
    return {
      locale: zhCN,
      localeval: 'zh-cn'
    };
  },
  methods: {
    moment,
    changeLocale (localeval) {
      this.localeval = localeval;
      if (localeval === EN) {
        moment.locale(EN);
        this.$i18n.locale = EN;
        this.locale = null;
      } else {
        moment.locale(ZH);
        this.$i18n.locale = ZH;
        this.locale = zhCN;
      }
    }
  }
};
</script>
